<template>
    <div>
        <el-card shadow="hover">
            <el-form :inline="true" :model="searchorder">
                <el-form-item label="订单名称：" >
                    <el-input v-model="searchorder.name" placeholder="请输入订单名称" clearable />
                </el-form-item>
                <el-form-item label="用户id：">
                    <el-input  type="number" v-model="searchorder.userId" placeholder="请输入用户id" clearable/>
                </el-form-item>
                <el-form-item label="状态：">
                  <el-select v-model="searchorder.state" placeholder="请选择订单状态">
                    <el-option
                        label="未付款"
                        :value="0">
                    </el-option>
                    <el-option
                        label="已付款"
                        :value="1">
                    </el-option>
                  </el-select>
                </el-form-item>
                 <el-form-item >
                    <el-button type="primary" plain @click="search">查询</el-button>
                 </el-form-item>
                 <el-form-item >
                   <el-button type="primary" @click="openAddDialog">添加订单</el-button>
                 </el-form-item>
                 <el-form-item >
                  <el-button type="danger" @click="openDeleteBatchDialog">批量删除</el-button>
                </el-form-item>
                 <el-dialog
                    :close-on-click-modal="true"
                    :title="title"
                    :visible.sync="addDialog"
                    width="30%"
                    :before-close="handleClose">
                    <el-form :model="addorder" :rules="rules" ref="form" >
                        <el-form-item label="订单名称：" prop="name" >
                            <el-input v-model="addorder.name" placeholder="请输入订单名称"></el-input>
                        </el-form-item> 
                        <el-form-item label="数量：" prop="count" >
                            <el-input v-model.number="addorder.count"  maxlength="11" type="number" placeholder="请输入数量"></el-input>
                        </el-form-item> 
                        <el-form-item label="价格：" prop="price" >
                            <el-input v-model.number="addorder.price"  maxlength="11" type="number" placeholder="请输入价格"></el-input>
                        </el-form-item> 
                        <el-form-item label="订单状态：" prop="state" >
                            <el-select v-model="addorder.state" placeholder="请选择订单状态">
                                <el-option
                                label="未付款"
                                value="0">
                                </el-option>
                                <el-option
                                label="已付款"
                                value="1">
                                </el-option>
                            </el-select>
                        </el-form-item>  
                    </el-form>
                      <span slot="footer" class="dialog-footer">
                        <el-button @click="addDialog = false">取 消</el-button>
                        <el-button type="primary" @click="confirm">确 定</el-button>
                      </span>
                </el-dialog>
            </el-form>
            <el-table
                :data="orderList"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
              <el-table-column
                  label="订单名称"
                  align="center"
                  prop="name">
              </el-table-column>
              <el-table-column
                  label="数量"
                  align="center"
                  prop="count">
              </el-table-column>
              <el-table-column
                  label="创建时间"
                  align="center"
                  prop="createTime">
              </el-table-column>
              <el-table-column
                  label="金额"
                  align="center"
                  prop="price">
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                      size="mini"
                      @click="openUpdateDialog(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                      size="mini"
                      type="danger"
                      @click="openDeleteDialog(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <my-dialog :show="tipDialog" :message="tipMessage" :callBack="callBackFun" @close="closeFun" />
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
    </template>
    
    <script>
    import orderApi from '../api/OrderApi.js';
    import MyDialog from './MyDialog.vue';
    export default {
        name: 'order',
      props: {
        msg: String
      },
      data(){
        var checkAge = (rule, value, callback) => {
            if (value == '') {
              return callback(new Error('年龄不能为空'));
            }
            if (!Number.isInteger(value)) {
                callback(new Error('请输入数字值'));
              } else {
            if (value <1 || value >188) {
                  callback(new Error('年龄输入范围错误'));
            } else {
                  callback();
                }
            }
          };
        var checkCount = (rule, value, callback) => {
            if (value == '') {
              return callback(new Error('订单数不能为空'));
            }
            if (!Number.isInteger(value)) {
                callback(new Error('请输入数字值'));
              } else {
            if (value <1) {
                  callback(new Error('订单数量输入范围错误'));
            } else {
                  callback();
                }
            }
          };
         var checkPrice = (rule, value, callback) => {
            if (value == '') {
              return callback(new Error('订单价格不能为空'));
            }
            if (!Number.isInteger(value)) {
                callback(new Error('请输入数字值'));
              } else {
            if (value <=0) {
                  callback(new Error('订单价格输入范围错误'));
            } else {
                  callback();
                }
            }
          };
        return{
          orderList: [],     
          pageNo:1,              
          pageSize:5,           
          total:100,            
          searchorder:{},
          title:'',      
          addDialog:false,
          tipMessage:'', 
          tipDialog:false,
          addorder:{}, 
          callBackFun:{}, 
          deleteId:[],   
          selectedList:[], 
          rules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],
                    age: [
                      { required: true, message: '请输入年龄', trigger: 'blur' },
                      { validator: checkAge, trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入电话', trigger: 'blur' },
                        { min: 11, max: 11, message: '请输入11位的电话号码', trigger: 'blur' }
                    ],
                    count:[
                        { required: true, message: '请输入订单数量', trigger: 'blur' },
                        { validator: checkCount, trigger: 'blur' }

                    ],
                    price:[
                        { required: true, message: '请输入订单价格', trigger: 'blur' },
                        { validator: checkPrice, trigger: 'blur' }
                    ],
                    state: [
                        { required: true, message: '请输入订单状态', trigger: 'blur' },
                    ],
             }
        }
      },
      async created(){
       this.loadList()
       
      },
      methods: {
        openDeleteBatchDialog(){
          if(this.deleteId.length == 0){
            this.$message.error('请选择订单！');
            return
          }
          this.tipMessage = `确认要删除这些数据吗？`
          this.tipDialog = true;
          this.callBackFun = this.deleteorder;
        },
        handleSelectionChange(val){
         this.deleteId = val.map(item => item.id);     
        },
        openAddDialog(){
          this.title = "新增订单信息";
          this.addDialog = true;
        },
        openUpdateDialog(index,data){
          this.title = "修改订单信息";
          this.addDialog = true;
          this.addorder = data;
        },
        openDeleteDialog(index,row){
          this.tipMessage = `确认要删除${row.name}吗？`
          this.tipDialog = true;
          this.callBackFun = this.deleteorder;
          this.deleteId.splice(0,this.deleteId.length);
          this.deleteId.push(row.id);
        },
        search(){
          this.pageNo = 1;  
          this.loadList();
        },
        async deleteorder(){
          let {data} =  await orderApi.deleteById(this.deleteId);
          this.showTips(data);
          this.loadList()
        },
        confirm(){
          this.$refs.form.validate(async valid => {
          if(valid){
            if(this.addorder.id != null){
              let {data} = await orderApi.updateorder(this.addorder);
              this.showTips(data);
            }else{
              let {data} = await orderApi.addorder(this.addorder);
              this.showTips(data);
            }
          }else return;
          })
        },
        handleSizeChange(val) {
          this.pageSize = val;
          this.loadList();
        },
        handleCurrentChange(val) {
          this.pageNo = val;
          this.loadList();
        },
        async loadList(){
          let {data} = await orderApi.selectByCondition(this.pageNo,this.pageSize,this.searchorder);
          console.log(data);
          this.orderList = data.rows;
          this.total = data.total;
        },
        closeFun(val){     
          this.tipDialog = val;
        },
        handleClose(){
          this.addDialog = false;
        },
        showTips(data){
          if(data.code == 200){
                this.$message({
                  type:'success',
                  message:data.data,
                  onClose:()=>{
                    this.loadList();
                    this.addDialog = false;
                  }
                })
                this.addorder = {};
            }else{
              this.$message({
                  type:'error',
                  message:data.data,
                  onClose:()=>{
                    this.loadList();
                    this.addDialog = false;
                  }
                })
            }
        }
      },
      components:{
        MyDialog,
      }
    
    }
    </script>
    
    <style>
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
      }
      .el-icon-arrow-down {
        font-size: 12px;
      }
    </style>